import { Layout, Menu, Breadcrumb, Dropdown } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import logo from '@/images/index_logo.png';
import portrait from '@/images/portrait.png';
import styles from './index.less';
import * as React from 'react';
import { Link } from 'umi';

const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;

export default (props: any) => {
  const [menuSelectKey, setMenuSelectKey] = React.useState('');
  const menuOnSelect = (info: { selectedKeys?: React.Key[], key: React.Key, keyPath: React.Key[], item: React.ReactInstance, domEvent: React.MouseEvent<HTMLElement> }) => {
    setMenuSelectKey(info.key as string);
  };

  const menuDataSource: {
    key: string,
    icon: React.ReactNode,
    title: string,
    items: {
      key: string,
      path: string,
      title: string,
    }[],
  }[] = [
    {
      key: 'sub1',
      icon: <UserOutlined/>,
      title: '用户管理',
      items: [
        {
          key: '1',
          path: '/userManager',
          title: '列表管理',
        },
        {
          key: '2',
          path: '#',
          title: '角色分配',
        },
        {
          key: '3',
          path: '#',
          title: '密码初始化',
        },
      ],
    },
    {
      key: 'sub2',
      icon: <UserOutlined/>,
      title: '应用管理',
      items: [
        {
          key: '4',
          path: '#',
          title: '列表管理',
        },
        {
          key: '5',
          path: '#',
          title: '资源管理',
        },
        {
          key: '6',
          path: '#',
          title: '应用授权管理',
        },
      ],
    },
    {
      key: 'sub3',
      icon: <UserOutlined/>,
      title: '会话管理',
      items: [{
        key: '7',
        path: '#',
        title: '列表管理',
      }],
    },
  ];

  const doRenderNavigation = () => {
    if (menuSelectKey === '1') {
      return (<>
        <Breadcrumb.Item>首页</Breadcrumb.Item>
        <Breadcrumb.Item>用户管理</Breadcrumb.Item>
        <Breadcrumb.Item>列表管理</Breadcrumb.Item>
      </>);
    } else if (menuSelectKey === '2') {
      return (<>
        <Breadcrumb.Item>首页</Breadcrumb.Item>
        <Breadcrumb.Item>用户管理</Breadcrumb.Item>
        <Breadcrumb.Item>角色分配</Breadcrumb.Item>
      </>);
    }
    return (<>
      <Breadcrumb.Item>首页</Breadcrumb.Item>
    </>);
  };
  return (
    <Layout>
      <Header>
        <div className={styles.mainLogo}>
          <span>
            <img alt='首页' src={logo}/>
          </span>
          <span>
            统一认证中心
          </span>
        </div>
        <Menu className={styles.mainMenu} theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
          <Menu.Item key="1">实时计算平台</Menu.Item>
          <Menu.Item key="2">指标引擎</Menu.Item>
          <Menu.Item key="3">决策引擎</Menu.Item>
        </Menu>
        <div className={styles.mainAuth}>
          <Dropdown overlay={(
            <Menu>
              <Menu.Item key="1" icon={<UserOutlined/>}>
                个人信息
              </Menu.Item>
              <Menu.Item key="2" icon={<UserOutlined/>}>
                密码修改
              </Menu.Item>
              <Menu.Item key="3" icon={<UserOutlined/>}>
                退出登录
              </Menu.Item>
            </Menu>
          )}>
            <a>
              <img alt='管理员' src={portrait}/>
              <span>系统管理员</span>
            </a>
          </Dropdown>
        </div>
      </Header>
      <Layout>
        <Sider width={200}>
          <Menu
            mode="inline"
            defaultOpenKeys={['sub1']}
            defaultSelectedKeys={['2']}
            style={{ height: '100%', borderRight: 0 }}
            onSelect={menuOnSelect}
          >
            {menuDataSource.map(subMenu => <SubMenu key={subMenu.key} icon={subMenu.icon} title={subMenu.title}>
              {subMenu.items.map(item => <Menu.Item key={item.key}>
                <Link to={item.path}>{item.title}</Link>
              </Menu.Item>)}
            </SubMenu>)
            }
          </Menu>
        </Sider>
        <Layout style={{ padding: '0px 24px 0px 24px' }}>
          {/*<Breadcrumb style={{ margin: '16px 0' }}>
            {menuSelectKey === '1' ? <>
              <Breadcrumb.Item>首页</Breadcrumb.Item>
              <Breadcrumb.Item>用户管理</Breadcrumb.Item>
              <Breadcrumb.Item>列表管理</Breadcrumb.Item>
            </> : <>
              <Breadcrumb.Item>首页</Breadcrumb.Item>
              <Breadcrumb.Item>应用管理</Breadcrumb.Item>
              <Breadcrumb.Item>列表管理</Breadcrumb.Item>
            </>
            }
          </Breadcrumb>*/}
          <Breadcrumb style={{ margin: '16px 0' }}>
            {doRenderNavigation()}
          </Breadcrumb>
          <Content
            className={styles.mainContent}
          >
            {props.children}
          </Content>
          <Footer style={{ textAlign: 'center' }}>联系电话：023-67886609 网站备案/许可证号：渝ICP备19014044号 重庆数宜信信用管理有限公司 版权所有 ©
            2019<br/>
            <Link to="/about">关于我们</Link>
          </Footer>
        </Layout>
      </Layout>
    </Layout>
  );
}
